import React, { memo } from "react";
import sty from "./sty.module.css";

const MinPlayer = memo((props) => {
  const { info, playing, handlePlayMusic } = props;
  return (
    <div className={sty.root}>
      <img src={info.picUrl} alt="" />
      <div className={sty.info}>
        <div className={sty.song}>{info.song}</div>
        <div className={sty.singer}>{info.singer}</div>
      </div>
      <div className={sty.play} onClick={() => handlePlayMusic()}>
        <i
          className={
            playing ? "iconfont icon-iconstop" : "iconfont icon-icon--1"
          }
        ></i>
      </div>
      <div className={sty.ctrl}>
        <i className={"iconfont icon-liebiao3"}></i>
      </div>
    </div>
  );
});
export default MinPlayer;
